<template>
	<view class="note-detail-main">
		<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
		<!-- 头部（作者头像，作者名字，关注按钮，分享） -->
		<view class="top-user-info">
			<view class="retunrn-user">
				<view class="return-preview-page" @click="returnPreview">
					<uni-icons type="left" size="25"></uni-icons>
				</view>
				<view class="avatar-username">
					<image :src="authorAvatar" mode="aspectFit" class="avatar-image"
						@click="toAuthorDetailPage(authorAid)"></image>
				</view>
				<view class="author-name">
					{{authorName}}
				</view>
			</view>
			<view class="share" @click="shareTaggle">
				<image src="@/static/icons/share.png" mode="aspectFit" class="share-image"></image>
			</view>
		</view>

		<!-- 笔记详情 （图片，内容，评论等）-->
		<view class="note-content-main">
			<!-- 使用Swiper组件并传递infos数组 (如果是图片)-->
			<swiper-page :infos="getNoteImgs()" v-if="!isVedio"></swiper-page>
			<!-- 如果是视频 -->
			<view class="show-video-area" v-else>
				<video :src="videoUrl" autoplay="true"></video>
			</view>

			<view class="note-content">
				<view class="note-title">
					{{noteTitle}}
				</view>
				<!-- 分割线 -->
				<DividerLine :width="100"></DividerLine>
				<view class="note-content-text">
					{{noteContent}}
				</view>
				<view class="topics" v-if="topicList.length > 0">
					<span class="topic-item" v-for="(item,index) in topicList" :key="index"
						@click="clickTopic(item.topicAid)">{{item.topicName}}</span>
				</view>
				<view class="aite-users" v-if="aiteUsers.length > 0">
					<span class="aite-users-item" v-for="(item,index) in aiteUsers" :key="index"
						@click="toAuthorDetailPage(item.userAid)">{{item.aitaUser}}</span>
				</view>
				<view class="date-release-comment">
					<view class="date-release">
						发布于 {{releaseDate}}
					</view>
					<view class="delete-and-commit">
						<view class="comment-text" @click="getInputFocus">
							评论
						</view>
						<view class="delete-dynamic" 
							@click="deleteDynamicFunc" 
							v-if="authorAid === currentLoginUserAid"
						>
							删除
						</view>
					</view>
				</view>
			</view>
			<!-- 分割线 -->
			<DividerLine></DividerLine>

			<!-- 评论 -->
			<view class="comment-main">
				<view class="total-comment-count">
					共{{commentCount}}条评论
				</view>
				<view class="comments" v-if="commentList.length > 0">
					<!-- 循环展示每条评论 -->
					<view class="comments-item" v-for="item in commentList" :key="item.aid">
						<view class="comments-item-noreplay">
							<view class="comment-user-avatar">
								<image :src="item.commentUserAvatar" mode="aspectFit" class="comment-user-avatar-image"
									@click="toAuthorDetailPage(item.commentUserAid)">
								</image>
							</view>
							<view class="username-content-time">
								<view class="comment-username" @click="toAuthorDetailPage(item.commentUserAid)">
									{{item.commentUsername}}
								</view>
								<view class="comment-content">
									{{item.commentContent}}
								</view>
								<view class="comment-time">
									<view class="comment-time-text">
										{{item.commentTime}}
									</view>
									<view class="comment-reply" @click="replyComment(item)">
										回复
									</view>
								</view>
							</view>
							<view class="comment-dianzan">
								<view class="dianzan-icon" @click="thumbsUp(item)">
									<uni-icons type="heart" size="24" v-if="!item.isLikeThisComment"></uni-icons>
									<uni-icons type="heart-filled" size="24" color="red" v-else></uni-icons>
								</view>
								<view class="likes-num">
									{{item.likeCount}}
								</view>
							</view>
						</view>
						<view class="comment-item-have-replay" v-if="item.replyList">
							<view class="reply-item" v-for="reply in item.replyList" :key="reply.aid">
								<view class="reply-avatar">
									<image :src="reply.replyAvatar" mode="aspectFit" class="reply-avatar-image"
										@click="toAuthorDetailPage(reply.replyUserAid)"></image>
								</view>
								<view class="reply-username-content-time">
									<view class="reply-username" @click="toAuthorDetailPage(reply.replyUserAid)">
										{{reply.replyUserName}}
									</view>
									<view class="reply-content">
										<span class="replay-text" @click="replyComment(reply)">回复</span>
										<span class="reply-which-user"
											@click="toAuthorDetailPage(reply.replayWhichUserAid)">{{reply.replayWhichUser}}:</span>
										<span class="reply-content-text">{{reply.replyContent}}</span>
									</view>
									<view class="reply-time">
										<span class="reply-time-text">{{reply.replyTime}}</span>
										&nbsp;
										<span class="reply-text" @click="replyComment(reply)">回复</span>
									</view>
								</view>
								<view class="reply-dianzan">
									<view class="reply-dianzan-icon" @click="thumbsUp(reply)">
										<uni-icons type="heart" size="22" v-if="!reply.isLikeThisComment"></uni-icons>
										<uni-icons type="heart-filled" size="22" color="red" v-else></uni-icons>
									</view>
									<view class="reply-dianzan-count">
										{{reply.likeCount}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 底部（评论，收藏，点赞，关注） -->
		<view class="bottom-bar">
			<view class="comment-input-icon-view">
				<view class="comment-input-icon">
					<image src="@/static/icons/sq-edit.png" mode="aspectFit" class="comment-input-icon-image">
					</image>
				</view>
				<view class="comment-input-view">
					<input type="text" v-model="commentInput" :focus="inputFocus" :placeholder="commentPlaceholder"
						@focus="handleInputFocus" @blur="handleInputBlur" @confirm="handleInputConfirm" />
				</view>
			</view>
			<view class="guanzhu-collect-dianzan" v-show="!inputFocus">
				<view class="dianzan-note" @click="dianzanNote">
					<uni-icons type="heart" size="30" v-if="!isLike"></uni-icons>
					<uni-icons type="heart-filled" color="#df2e21" size="30" v-else></uni-icons>
					<span class="dianzan-num-text">{{noteLikesNum}}</span>
				</view>
				<view class="collect-note-main" @click="collectNote">
					<uni-icons type="star" size="34" v-if="!isCollect"></uni-icons>
					<uni-icons type="star-filled" size="34" color="#df2e21" v-else></uni-icons>
					<span class="dianzan-num-text">{{collectNum}}</span>
				</view>
				<view class="guanzhu-user" @click="guanzhuAuthor">
					<image src="@/static/icons/unguanzhu.png" mode="aspectFit" class="guanzhu-user-image"
						v-if="!isGuanzhuAuthor"></image>
					<image src="@/static/icons/guanzhued.png" mode="aspectFit" class="guanzhued-user-image" v-else>
					</image>
				</view>
			</view>
			<view class="send-message-view" v-show="inputFocus">
				<button @click="sendComment">发送</button>
			</view>
		</view>


		<!-- 点击分享弹窗 -->
		<uni-popup ref="sharePopup" type="share" safeArea backgroundColor="#fff" @change="change">
			<uni-popup-share title="分享到" @select="selectPopItem"></uni-popup-share>
		</uni-popup>

	</view>
</template>

<script>
	import {
		ref,
		nextTick
	} from 'vue';
	import {
		baseUrl
	} from '@/request/axios.js';
	import {
		getNoteDetailInfos,
		thumbsUpThisComment,
		thumbsUpNote,
		collectNote,
		guanzhuAuthor,
		sendCommentContent,
		deleteDynamic
	} from '@/request/yufans.js'
	import SwiperPage from '@/components/common-components/SwiperPage.vue';
	import DividerLine from '@/components/common-components/DividerLine.vue';
	import mitter from '@/common/mitt/eventBus.js';
	export default {
		components: {
			SwiperPage,
			DividerLine
		},
		data() {
			return {
				isVedio: false, // 笔记是否是视频
				videoUrl: '', // 如果笔记是视频，videoUrl就有地址
				isUserInitiatedBlur: false, // 标志位变量，用来区分是正常的用户操作导致的失焦
				inputFocus: false,
				commentPlaceholder: '说点什么...',
				authorAid: null, // 这篇笔记的作者aid(用户aid)
				isGuanzhuAuthor: false, // 是否关注作者
				commentInput: '', // 输入的评论
				commentList: [
					// 示例评论数据，实际中可从接口获取
					{
						aid: 1,
						commentUserAvatar: 'https://img1.baidu.com/it/u=1090452517,2487311686&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=501',
						commentUserAid: 0,
						commentUsername: '小猫爱吃鱼',
						commentContent: '哇塞，大理真实人间仙境！',
						commentTime: '2024-12-02 23:12:02',
						likeCount: 0,
						isLikeThisComment: false, // 当前登录用户是否点赞了这条评论
						replyList: [{
							aid: 1,
							replyAvatar: 'https://img0.baidu.com/it/u=443783748,759089034&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
							replyUserAid: 0,
							replyUserName: '杨洋',
							replyContent: '真的，很建议你来大理玩儿。',
							replyTime: '2024-12-15 02:23:33',
							likeCount: 0,
							replayWhichUserAid: 0,
							replayWhichUser: '小猫爱吃鱼',
							isLikeThisComment: false, // 当前登录用户是否点赞了这条评论
						}]
					},
					{
						aid: 2,
						commentUserAvatar: 'https://img1.baidu.com/it/u=1116638693,3992981161&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						commentUserAid: 0,
						commentUsername: '搞笑女小慧',
						commentContent: '我家大理的，嘿嘿！',
						commentTime: '2024-12-09 23:12:00',
						likeCount: 32,
						isLikeThisComment: false, // 当前登录用户是否点赞了这条评论
						replyList: [],
					}
				],
				replyCommentId: null, // 用于记录当前要回复的评论id
				commentCount: 20,
				releaseDate: '2024-12-04 12:00:00',
				aiteUsers: [{
						userAid: 1,
						aitaUser: '@fantasy'
					},
					{
						userAid: 1,
						aitaUser: '@我爱吃西红柿'
					},
					{
						userAid: 1,
						aitaUser: '@耳根'
					},
				],
				topicList: [{
						topicAid: 1,
						topicName: '#大理'
					},
					{
						topicAid: 2,
						topicName: '#大理的天气'
					},
					{
						topicAid: 3,
						topicName: '#洱海'
					},
					{
						topicAid: 4,
						topicName: '#大理特色'
					}
				],
				noteContent: '在大理的日子，时光仿佛都慢了下来。每天清晨，被第一缕阳光温柔唤醒，推开窗，清新的空气裹挟着花草的芬芳扑面而来。沿着洱海漫步🚶‍♀️，湖水在阳光的照耀下闪烁着粼粼波光，远处的苍山巍峨耸立，山顶的积雪终年不化。岸边的垂柳依依，随风轻舞。偶尔还能看到渔民划着小船，在湖面上悠然地撒网捕鱼，那画面宛如一幅宁静的山水画卷。在大理古城，青石板路蜿蜒曲折，古色古香的建筑错落有致地排列两旁。街边的小店琳琅满目，有充满民族特色的手工艺品🎨，有散发着阵阵香气的特色小吃。走进一家咖啡店，点上一杯香浓的拿铁，坐在窗边，看着来来往往的游客和当地人，感受着这座古城的独特韵味。在这里，还结识了许多志同道合的朋友。我们一起在民宿的院子里烧烤、唱歌、分享彼此的故事。晚上，伴着虫鸣声入睡，一夜好眠。大理，就是这样一个充满魅力的地方，让人流连忘返。@[民宿名称] #大理旅居 #洱海 #大理古城',
				noteTitle: '今天天气真好',
				// 可以在这里添加一些分享相关的数据，比如分享的标题、内容、链接等，以下是示例
				shareTitle: '快来看看这个！',
				shareContent: '这是一个很有意思的内容，分享给你哦~',
				shareLink: baseUrl + '/pages/tabBar/component/topBar/travel/noteDetailPage?aid=' + this.receivedAid,
				show: false,
				isCollect: false,
				noteImgs: [
					'https://img2.baidu.com/it/u=2822780089,1763663082&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800',
					'https://img0.baidu.com/it/u=2931243091,718249849&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=427',
					'https://img0.baidu.com/it/u=1144530497,2228596577&fm=253&fmt=auto&app=120&f=JPEG?w=751&h=500'
				],
				currentLoginUserAid: null, // 当前登录的用户aid
				collectNum: 0, // 这篇笔记有多少用户收藏
				isLike: false, // 是否点赞了这篇笔记
				noteLikesNum: 0, // 这条笔记的点赞数量
				authorName: '唐家三少',
				receivedAid: null, // 用于存储接收到的aid值
				authorAvatar: 'https://q3.itc.cn/q_70/images03/20240613/862cf9ebe25b4bbfb95bdf2a1bf1aec0.jpeg',
			};
		},
		onLoad(options) {
			// console.log(options);
			this.receivedAid = options.aid;
			this.getNoteDetail();
		},

		methods: {

			// 获取笔记详情信息
			getNoteDetail() {
				const param = {
					noteAid: this.receivedAid
				}
				getNoteDetailInfos(param).then(res => {
					// console.log(res);
					if (res.data.code === 10000) {
						const result = res.data.data;
						this.isVedio = result.isVedio;
						this.videoUrl = result.videoUrl;
						this.authorAid = result.authorAid;
						this.currentLoginUserAid = uni.getStorageSync("userAid");
						this.aiteUsers = result.aiteUsers;
						this.authorAvatar = result.authorAvatar;
						this.authorName = result.authorName;
						this.collectNum = result.collectNum;
						this.commentCount = result.commentCount;
						this.commentList = result.commentList;
						this.isCollect = result.isCollect;
						this.isGuanzhuAuthor = result.isGuanzhuAuthor;
						this.isLike = result.isLike;
						this.noteContent = result.noteContent;
						this.noteImgs = result.noteImgs;
						this.noteLikesNum = result.noteLikesNum;
						this.noteTitle = result.noteTitle;
						this.releaseDate = result.releaseDate;
						this.topicList = result.topicList;
					} else {
						uni.showToast({
							title: '网络出错，请稍后再试...',
							icon: 'none',
							duration: 1000,
						})
					}

				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '网络出错，请稍后再试...',
						icon: 'none',
						duration: 1000,
					})
					// setTimeout(()=>{
					// 	uni.navigateBack();
					// },1000)
				})
			},

			change(e) {
				this.show = e.show
			},
			selectPopItem(e) {
				switch (e.index) {
					case 0:
						// 分享到微信
						this.shareToWeixin();
						break;
					case 1:
						// 分享到支付宝（需确保支付宝小程序相关配置正确且符合要求）
						this.shareToAlipay();
						break;
					case 2:
						// 分享到QQ
						this.shareToQQ();
						break;
					case 3:
						// 分享到微博
						this.shareToSinaWeibo();
						break;
					default:
						break;
				}
			},
			shareToWeixin() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession", // 这里可根据需求切换分享场景，如改为分享到朋友圈则用 "WXSceneTimeline"
					type: 0,
					title: this.shareTitle,
					summary: this.shareContent,
					href: this.shareLink,
					success: function(res) {
						console.log("分享到微信成功", res);
					},
					fail: function(err) {
						console.log("分享到微信失败", err);
						// 可以根据具体错误码等进行更详细的错误提示，例如判断是否是权限问题等
						if (err.errMsg.includes("permission denied")) {
							uni.showToast({
								title: "请先授予微信分享权限哦",
								icon: "none"
							});
						} else {
							uni.showToast({
								title: "分享到微信出现问题，请稍后再试",
								icon: "none"
							});
						}
					}
				});
			},
			shareToAlipay() {
				uni.share({
					provider: "alipay",
					type: 0,
					title: this.shareTitle,
					summary: this.shareContent,
					href: this.shareLink,
					success: function(res) {
						console.log("分享到支付宝成功", res);
					},
					fail: function(err) {
						console.log("分享到支付宝失败", err);
						// 同样可根据错误情况给出更合适的提示
						if (err.errMsg.includes("not found")) {
							uni.showToast({
								title: "未检测到支付宝相关配置，请检查后重试",
								icon: "none"
							});
						} else {
							uni.showToast({
								title: "分享到支付宝出现问题，请稍后再试",
								icon: "none"
							});
						}
					}
				});
			},
			shareToQQ() {
				uni.share({
					provider: "qq",
					type: 0,
					title: this.shareTitle,
					summary: this.shareContent,
					href: this.shareLink,
					success: function(res) {
						console.log("分享到QQ成功", res);
					},
					fail: function(err) {
						console.log("分享到QQ失败", err);
						if (err.errMsg.includes("network error")) {
							uni.showToast({
								title: "网络出现问题，分享到QQ失败，请检查网络后重试",
								icon: "none"
							});
						} else {
							uni.showToast({
								title: "分享到QQ出现问题，请稍后再试",
								icon: "none"
							});
						}
					}
				});
			},
			shareToSinaWeibo() {
				uni.share({
					provider: "sinaweibo",
					type: 0,
					title: this.shareTitle,
					summary: this.shareContent,
					href: this.shareLink,
					success: function(res) {
						console.log("分享到微博成功", res);
					},
					fail: function(err) {
						console.log("分享到微博失败", err);
						if (err.errMsg.includes("auth failed")) {
							uni.showToast({
								title: "微博授权失败，请检查微博账号相关设置后重试",
								icon: "none"
							});
						} else {
							uni.showToast({
								title: "分享到微博出现问题，请稍后再试",
								icon: "none"
							});
						}
					}
				});
			},
			returnPreview() {
				uni.navigateBack();
				// this.$router.back();
			},
			shareTaggle() {
				this.$refs.sharePopup.open()
			},
			dianzanNote() {
				const param = {
					noteAid: this.receivedAid
				}
				thumbsUpNote(param).then(res => {
					if (res.data.code === 10000) {
						this.isLike = !this.isLike
						if (this.isLike) {
							this.noteLikesNum += 1;
						} else {
							this.noteLikesNum === 0 ? 0 : this.noteLikesNum -= 1;
						}
					} else {
						uni.showToast({
							title: '请稍后再试...',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '请稍后再试...',
						icon: 'none'
					})
				})
			},

			collectNote() {
				const param = {
					noteAid: this.receivedAid
				}
				collectNote(param).then(res => {
					// console.log(res);
					if (res.data.code === 10000) {
						this.isCollect = !this.isCollect
						if (this.isCollect) {
							this.collectNum += 1;
						} else {
							this.collectNum === 0 ? 0 : this.collectNum -= 1;
						}
					} else {
						uni.showToast({
							title: '请稍后再试...',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '请稍后再试...',
						icon: 'none'
					})
				})
			},

			guanzhuAuthorApi() {
				const that = this;
				const param = {
					authorAid: that.authorAid
				}
				// console.log(param);
				guanzhuAuthor(param).then(res => {
					// console.log(res);
					if (res.data.code === 10000) {
						that.isGuanzhuAuthor = !that.isGuanzhuAuthor
						if (this.isGuanzhuAuthor) {
							uni.showToast({
								title: '关注成功！',
							})
						} else {
							uni.showToast({
								title: '已取消关注！',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '请稍后再试...',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '请稍后再试...',
						icon: 'none'
					})
				})
			},

			// 点击关注作者
			guanzhuAuthor() {
				const that = this;
				if (this.isGuanzhuAuthor) {
					uni.showModal({
						title: '提示',
						content: '确定取消关注吗？',
						cancelText: '再想想',
						success(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								that.guanzhuAuthorApi();
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					})
				} else {
					that.guanzhuAuthorApi();
				}
			},

			getNoteImgs() {
				// console.log("传递给子组件前的noteImgs:", this.noteImgs);
				return this.noteImgs;
			},

			// 点赞或者取消点赞评论
			thumbsUp(item) {
				const param = {
					commentAid: item.aid
				}
				thumbsUpThisComment(param).then(res => {
					if (res.data.code === 10000) {
						this.getNoteDetail();
					} else {
						uni.showToast({
							title: '请稍后再试...',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: '请稍后再试...',
						icon: 'none'
					})
				})
			},

			// 点击作者头像去作者主页
			toAuthorDetailPage(item) {
				// console.log(item);
				uni.navigateTo({
					// 使用查询字符串形式添加参数，这里假设目标页面可以通过这种方式接收并解析参数
					url: `/pages/tabBar/template/userDetailPage?aid=${item}`
				})
			},

			// 点击回复
			replyComment(item) {
				// console.log(item);
				this.replyCommentId = item.aid;
				if (item.commentUsername) {
					this.commentPlaceholder = '回复：' + item.commentUsername;
				} else {
					this.commentPlaceholder = '回复：' + item.replyUserName;
				}
				// 将焦点设置到输入框
				this.inputFocus = true;
			},
			handleInputFocus() {
				this.inputFocus = true;
			},

			handleInputBlur() {
				setTimeout(() => {
					this.inputFocus = false;
				}, 1000);
			},

			handleInputConfirm() {
				setTimeout(() => {
					this.inputFocus = false;
				}, 1000)
			},

			// 发送评论
			sendComment() {
				const that = this;
				// console.log('发送中');
				// console.log(this.replyCommentId);
				// console.log(this.commentInput);
				if (this.commentInput.trim() === '') {
					uni.showToast({
						title: '请先输入评论',
						icon: 'none'
					})
				} else {
					const data = {
						replyCommentId: this.replyCommentId,
						commentInput: this.commentInput,
						noteAid: this.receivedAid
					}
					// console.log(data);
					sendCommentContent(data).then(res => {
						if (res.data.code === 10000) {
							uni.showToast({
								title: '评论成功！',
								icon: 'none'
							})
							that.getNoteDetail();

						} else {
							uni.showToast({
								title: '请稍后再试...',
								icon: 'none'
							})
						}
					}).catch(err => {
						console.log(err);
						uni.showToast({
							title: '请稍后再试...',
							icon: 'none'
						})
					})
					this.commentInput = '';
				}
			},

			// 点击评论获得输入框焦点
			getInputFocus() {
				this.inputFocus = true;
				this.replyCommentId = null;
			},

			// 点击话题
			clickTopic(topicAid) {
				console.log(topicAid);
			},

			// 删除这条评论
			deleteDynamicFunc() {
				const self = this;
				uni.showModal({
					title: '提示',
					content: '确定删除这条笔记吗？',
					cancelText: '再想想',
					cancelColor: '#7f7f7f',
					confirmColor: '#66596b',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							const data = {
								noteAid: self.receivedAid
							}
							deleteDynamic(data).then(successRes => {
								if (successRes.data.code === 10000) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									})
									mitter.emit("startRefresh",true)
									uni.navigateBack()
								} else {
									uni.showToast({
										title: '删除失败! 请稍后再试...',
										icon: 'none'
									})
								}
							}).catch(err => {
								console.error("删除失败", err);
								uni.showToast({
									title: '删除失败! 请稍后再试...',
									icon: 'none'
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},

		},
	};
</script>

<style lang="scss" scoped>
	.note-detail-main {
		width: 100%;
		height: 100vh;
		// padding-left: 30rpx;
		// padding-right: 30rpx;
		// padding-top: 60rpx;
		// background-color: #b4b6d1;
		overflow-y: scroll;

		.top-user-info {
			z-index: 999;
			width: 100%;
			position: fixed;
			background-color: #fff;
			top: 0;
			// background-color: #b4b6d1;
			padding-top: 80rpx;
			// padding-left: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;

			.retunrn-user {
				margin-left: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.avatar-username {
					margin-left: 30rpx;

					.avatar-image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}
				}

				.author-name {
					margin-left: 20rpx;
					letter-spacing: 2rpx;
				}
			}

			.share {
				margin-right: 30rpx;
				// background-color: #01c6c1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 30rpx;

				.share-image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.note-content-main {
			margin-top: 165rpx;
			margin-bottom: 200rpx;

			.show-video-area {
				width: 100%;
				height: 500rpx;

				video {
					width: 100%;
					height: 100%;
				}
			}

			.note-content {
				margin-top: 30rpx;
				width: 90%;
				// background-color: #01c6c1;
				margin-left: auto;
				margin-right: auto;

				.note-title {
					font-size: 34rpx;
					letter-spacing: 3rpx;
					// font-weight: bold;
				}

				.note-content-text {
					margin-top: 20rpx;
					letter-spacing: 1rpx;
					line-height: 1.5;
				}

				.topics {
					margin-top: 20rpx;

					.topic-item {
						margin-right: 10rpx;
						color: #008682;
					}
				}

				.aite-users {
					margin-top: 20rpx;

					.aite-users-item {
						margin-right: 10rpx;
						color: #008682;
					}
				}

				.date-release-comment {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.date-release {
						margin-top: 20rpx;
						color: #969696;
						font-size: 25rpx;
					}

					.delete-and-commit {
						display: flex;

						.comment-text {
							display: flex;
							justify-content: center;
							flex-direction: row;
							align-items: center;
							font-size: 30rpx;
							color: #01c6c1;
							// background-color: #005f5c;
						}

						.delete-dynamic {
							font-size: 30rpx;
							color: #aa0000;
							margin-left: 10px;
						}
					}
				}
			}

			.comment-main {
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 30rpx;

				.total-comment-count {
					margin-top: 20rpx;
					color: #969696;
					font-size: 25rpx;
					letter-spacing: 3rpx;
				}

				.comments {
					margin-top: 30rpx;

					.comments-item {
						margin-top: 20rpx;

						.comments-item-noreplay {
							display: flex;
							flex-direction: row;
							justify-content: space-between;

							.comment-user-avatar {

								.comment-user-avatar-image {
									width: 70rpx;
									height: 70rpx;
									border-radius: 50%;
								}
							}

							.username-content-time {
								width: 80%;
								margin-left: 20rpx;

								.comment-username {
									display: inline-block;
									color: #005f5c;
								}

								.comment-content {
									margin-top: 15rpx;
									line-height: 1.5;
								}

								.comment-time {
									margin-top: 15rpx;
									display: flex;

									.comment-time-text {
										color: #7f7f7f;
										margin-right: 10rpx;
										font-size: 25rpx;
									}

									.comment-reply {
										color: #717171;
										font-size: 25rpx;
									}
								}
							}

							.comment-dianzan {
								.likes-num {
									// background-color: #008682;
									display: flex;
									align-items: center;
									justify-content: center;
									color: #595959;
									font-size: 22rpx;
								}
							}
						}

						.comment-item-have-replay {
							margin-top: 30rpx;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;

							// background-color: #005f5c;
							.reply-item {
								display: flex;

								.reply-avatar {
									margin-left: 60rpx;
									margin-right: 20rpx;

									// background-color: #c1dee1;
									.reply-avatar-image {
										width: 60rpx;
										height: 60rpx;
										border-radius: 50%;
									}
								}

								.reply-username-content-time {
									width: 70%;

									// background-color: #afe8b6;
									.reply-username {
										display: inline-block;
										color: #797979;
									}

									.reply-content {
										margin-top: 15rpx;

										.replay-text {
											font-size: 24rpx;
											color: #6d6d6d;
										}

										.reply-which-user {
											margin-left: 5rpx;
											margin-right: 15rpx;
											color: #005f5c;
										}

										.reply-content-text {
											line-height: 1.5;
										}
									}

									.reply-time {
										margin-top: 15rpx;

										.reply-time-text {
											color: #7e7e7e;
											font-size: 25rpx;
										}

										.reply-text {
											color: #6b6b6b;
											font-size: 24rpx;
										}
									}
								}

								.reply-dianzan {
									.reply-dianzan-count {
										display: flex;
										justify-content: center;
										align-items: center;
										color: #767676;
										font-size: 20rpx;
									}
								}
							}
						}
					}
				}
			}
		}

		.bottom-bar {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.comment-input-icon-view {
				margin-left: 30rpx;
				display: flex;

				.comment-input-icon {
					margin-right: 20rpx;

					.comment-input-icon-image {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.comment-input-view {
					width: 300rpx;
					// background-color: #005f5c;
				}
			}

			.guanzhu-collect-dianzan {
				// background-color: #c1ecf0;
				width: 40%;
				margin-right: 30rpx;
				display: flex;

				.dianzan-note {
					display: flex;
					align-items: center;

					.dianzan-num-text {
						margin-left: 8rpx;
					}
				}

				.collect-note-main {
					margin-left: 20rpx;
					display: flex;
					align-items: center;
				}

				.guanzhu-user {
					// background-color: #005f5c;
					margin-left: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.guanzhu-user-image {
						width: 44rpx;
						height: 44rpx;
					}

					.guanzhued-user-image {
						width: 55rpx;
						height: 55rpx;
					}
				}
			}

			.send-message-view {
				button {
					width: 250rpx;
					height: 80rpx;
					background-color: #01c6c1;
					border: none;
					border-radius: 60rpx;
					letter-spacing: 2rpx;
					color: #fff;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}

				// background-color: #005f5c;
			}

		}
	}
</style>